<template>
    <div class="app-container">
      <div class="filter-container">
        <el-form ref="dataForm" size="mini" :model="listQuery" label-position="right" label-width="auto">
          <div class="lineBox">
            <el-form-item label="档号" prop="dh">
              <el-input v-model="listQuery.dh" size="mini" placeholder="" style="width: 120px" />
            </el-form-item>
          </div>
          <div class="lineBox">
            <el-form-item label="全宗号：" prop="qzh">
              <el-input v-model="listQuery.qzh" size="mini" placeholder="" style="width: 120px" />
            </el-form-item>
          </div>
  
          <div class="lineBox" style="width: 190px">
            <el-form-item label="密级：" prop="mj">
              <el-input v-model="listQuery.mj" size="mini" placeholder="" style="width: 120px" />
            </el-form-item>
          </div>
  
          <div class="lineBox">
            <el-form-item label="期限：" prop="bgqx" style="width: 190px">
              <el-input v-model="listQuery.bgqx" size="mini" placeholder="" style="width: 120px" />
            </el-form-item>
          </div>
  
          <div class="lineBox">
            <el-form-item label="类别号：" prop="lbh">
              <el-input v-model="listQuery.lbh" size="mini" placeholder="" style="width: 120px" />
            </el-form-item>
          </div>
  
          <div class="lineBox">
            <el-form-item label="时间：" prop="sj">
              <el-input v-model="listQuery.sj" size="mini" placeholder="" style="width: 120px" />
            </el-form-item>
          </div>
  
          <div class="lineBox">
            <el-form-item label="文种：" prop="wz">
              <el-input v-model="listQuery.wz" size="mini" placeholder="" style="width: 120px" />
            </el-form-item>
          </div>
  
          <div class="lineBox">
            <el-form-item label="题名：" prop="tm">
              <el-input v-model="listQuery.tm" size="mini" placeholder="" style="width: 120px" />
            </el-form-item>
          </div>
  
          <div class="lineBox">
            <el-form-item label="文件编号：" prop="wjbh">
              <el-input v-model="listQuery.wjbh" size="mini" placeholder="" style="width: 120px" />
            </el-form-item>
          </div>
  
          <div class="lineBox">
            <el-form-item label="主题词：" prop="ztc">
              <el-input v-model="listQuery.ztc" size="mini" placeholder="" style="width: 120px" />
            </el-form-item>
          </div>
  
  
  

  
          <div class="lineBox">
            <el-button size="mini" type="primary" @click="handleFilter">
              筛选
            </el-button>
            <!-- <el-button size="mini" type="primary" @click="qwjsFilter">
              全文检索
            </el-button> -->
            <el-button size="mini" @click="reset">
              重置
            </el-button>
          </div>
        </el-form>
      </div>
  
      <div class="myTable" style="min-height: 600px">
        <div class="filter-container">
          <div class="operation-buttons">
            <el-button v-if="isAdmin"
              type="danger"
              size="mini"
              :disabled="selectedRows.length === 0"
              @click="handleBatchDelete"
            >
              批量删除
            </el-button>
          </div>
        </div>
        <el-table 
          :key="tableKey" 
          :data="list" 
          fit 
          size="mini"
          @selection-change="handleSelectionChange"
          highlight-current-row 
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          />
          <el-table-column label="ID" prop="id" align="center" width="100" />
          <el-table-column label="档号" prop="dh" align="center" min-width="150" />
          <el-table-column label="密级" prop="mj" align="center" min-width="80" />
          <el-table-column label="题名" show-overflow-tooltip  prop="tm" align="center" min-width="220" />
          <el-table-column label="主题词" prop="ztc" align="center" min-width="80" />
          <el-table-column label="文种" prop="wz" align="center" min-width="80" />
          <el-table-column label="发文时间" prop="sj" align="center" min-width="80" />
          
          
          <el-table-column label="文件编号" prop="wjbh" align="center" min-width="200" />

  
          <el-table-column label="年份" prop="lbh" align="center" min-width="50" />
          <el-table-column fixed="right" label="操作" align="center" min-width="200" class-name="small-padding fixed-width">
            <template slot-scope="{ row, $index }">
  
              <el-button type="primary" size="mini" @click="skipdocview(row, $index)">
                查看
              </el-button>
              <el-button v-if="isAdmin" size="mini" type="danger" @click="handleDelete(row, $index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
  
      <div v-if="isText == false">
        <pagination size="mini" :page-sizes="[10]" :total="total" :page.sync="listQuery.page"
          :limit.sync="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" @pagination="getList" />
      </div>
      <div v-if="isText == true">
        <pagination size="mini" :page-sizes="[10]" :total="total" :page.sync="listQuery.page"
          :limit.sync="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" @pagination="getqwjs" />
      </div>
    </div>
  </template>
  
  <script>
  import { ocrArtApi } from "@/api/ocrart";
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters([
        'roles',
        'name'
      ]),
      isAdmin() {
        return this.roles.includes('admin')
      }
    },


    components: { Pagination },
  
    data() {
      return {
        selectedRows: [],
        isText: false,
        formInline: {
          user: "",
          region: "",
        },
        value: "",
  
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: false,
        listQuery: {
          mj: "",
          pageNumber: 1,
          page: 1,
          limit: 10,
          dh: "",
          qzh: "",
          jm: "",
          bgqx: "",
          lbh: "",
          sj: "",
          wz: "",
          tm: "",
          wjbh: "",
          ztc: "",
          z_status: null,
        },
        data: [],
      };
    },
  
    mounted() { },
  
    created() {
      this.getList();
    },
    methods: {
      skipxiugai(row, index) {
  
        let url = "/documentfilemana/eid?id=" + row.id
  
        window.open(url, '_blank');
      },
  
      // 修改跳转

  
      skipdocview(row, index) {
  
  
        let url = "/processed/show?id=" + row.id
  
        window.open(url, '_blank');
      },
  

      reset() {
  
        this.listQuery.mj = "";
        this.listQuery.dh = "";
        this.listQuery.qzh = "";
        this.listQuery.jm = "";
        this.listQuery.bgqx = "";
        this.listQuery.lbh = "";
        this.listQuery.sj = "";
        this.listQuery.wz = "";
        this.listQuery.tm = "";
        this.listQuery.wjbh = "";
        this.listQuery.ztc = "";
        this.listQuery.content = "";
  
        this.list = [];
        this.total = 0;
        this.isText = false;
        this.listQuery.page = 1;
        this.getList();
  
      },
      handleFilter() {
        this.list = [];
        this.total = 0;
        this.isText = false;
        this.listQuery.page = 1;
        this.getList();
      },
  
      qwjsFilter() {
        this.list = [];
        this.total = 0;
        this.isText = true;
        this.listQuery.page = 1;
        this.getqwjs();
      },
  

  
      // 数据列表
      async getList() {
        this.list = [];
        this.listLoading = true;
        const response = await ocrArtApi("index", this.listQuery);
        if (response.code == 200) {
          this.list = response.data.resultList;
          this.total = response.totalCount;
          // this.type = response.type
          //   // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false;
          }, 1.5 * 1000);
        }
      },
  
      handleCreate() {
        this.$refs.addNoticeDlg.showDialog();
      },
  
      // 删除指标
      async handleDelete(row, index) {
        this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const data = { id: row.id };
  
            const response = await ocrArtApi("deldelArticleById", data);
  
            if (response.code == 200) {
              this.$notify({
                title: "成功",
                message: response.message,
                type: "success",
                duration: 2000,
              });
              this.list.splice(index, 1);
            } else {
              this.$notify({
                title: "失败",
                message: response.message,
                type: "error",
                duration: 2000,
              });
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
  
      handleSelectionChange(val) {
        this.selectedRows = val;
      },
  
      async handleBatchDelete() {
        if (this.selectedRows.length === 0) {
          this.$message({
            message: '请选择要删除的记录',
            type: 'warning'
          });
          return;
        }
  
        try {
          await this.$confirm('此操作将永久删除选中的记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          });
  
          const ids = this.selectedRows.map(row => row.id);
          const response = await ocrArtApi("deldelArticleByIds", { ids: ids });
  
          if (response.code == 200) {
            this.$notify({
              title: '成功',
              message: '批量删除成功',
              type: 'success',
              duration: 2000
            });
            this.getList();
          } else {
            this.$notify({
              title: '失败',
              message: response.message,
              type: 'error',
              duration: 2000
            });
          }
        } catch (error) {
          if (error !== 'cancel') {
            console.error('批量删除出错:', error);
          }
        }
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .filter-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .operation-buttons {
    display: flex;
    gap: 10px;
    padding-right: 10px;
  }
  
  ::v-deep .el-checkbox__label {
    font-size: 12px;
  }
  
  .demo-image__preview {
    float: left;
    margin-left: 5px;
  }
  .demonstration {
    font-size: 12px;
    color: #333;
    font-weight: normal;
  }
  .myTable {
    background-color: #fff;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  </style>
  